<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>history api</title>
</head>
<body>
 <p>兼容性: IE10+</p>
 <p>三个API: pushState(stateObj, title, url), replaceState(参数同上), onpopstate(event)</p>
 <p>
   浏览器针对每个页面维护一个History栈。执行pushState函数可将相应的url压入栈顶，同时修改当前指针；
	 当执行back操作时，history栈大小并不会改变（history.length不变），仅仅移动当前指针的位置；
	 若当前指针在history栈的中间位置（非栈顶），此时执行pushState会改变history栈的大小。
 </p>
 <p>pushState(), url会改变, 但页面本身不会跳转</p>
 <p>pushState()与replaceState()不会触发popstate事件, 其他方式的url改变, 如浏览器前进后退则会</p>
 <p>pushState()与replaceState()不会触发hashchange事件, 即使修改的是hash</p>
 <p>但hash的改变, 不但触发hashchange事件, 还会触发popstate事件</p>
 <p>pushState()每调用一次, 无论传入的url是什么, history.length都会加一, 但location.href='#hash'多次调用history.length只增加一次</p>
 <p>下面是示例, 注意查看控制台:</p>
 <div>
   <button onclick="pushState()">pushState</button>
 </div>
 <div>
   <button onclick="javascript:location.href = '#foo'">hashchange: location.href='#'</button>
 </div>
 <div>
   <button onclick="javascript: window.open('test')">open a window, with history.length = 1</button>
 </div>
 <div>
   <p>参考资料:</p>
	 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate">https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate</a>
	 <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">https://developer.mozilla.org/en-US/docs/Web/API/History_API</a>
 </div>
 <script>
   var i = 1

   function pushState() {
	   // 为方便观察, 让i递增
	   history.pushState({count: i}, 'title'+i, '#'+i++)
		 // 使用下面的代码, 可以发现, hash值相同时, history.length仍在增加
	   //history.pushState({count: i}, 'title'+i, '#'+i)
	 }

	 window.onpopstate = function(e) {
	   console.log(e)
	 }

	 window.onhashchange = function(e) {
	   console.log(e)
	 }
 </script>
</body>
</html>
